<template>
	<view class="tcmReport-page">
		<view class="profile-section" v-if="reportDetail&&userInfo">
			<view class="avatar-block">
				<image :src="userInfo.avatar" class="avatar" />
			</view>
			<view class="right-block">
				<view class="name">
					{{userInfo.mobile}}
				</view>
				<view class="date">{{reportDetail.create_time}}</view>
			</view>
		</view>
		<!-- 导航栏（锚点列表） -->
		<view class="nav-bar" v-if="reportDetail">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ active: activeIndex === index }" @click="scrollToAnchor(index)">
				<image :src="activeIndex === index ? item.img2 : item.img" style="width: 20px; height: 20px;" />
				{{ item.name }}
			</view>
		</view>
		<view id='anchor-0'>
			<view class="report-item" v-if="reportDetail">
				<!--      综合评估-->
				<view class="evaluation-box">
					<view class="title-images-box">
						<image src="https://res.jt-health.cn/images/xiaojie/zhonghe.png" class="title-images" />
					</view>
					<view class="chart-box" v-if="page_image_01">
						<image :src="page_image_01" class="chat-image" />
						<view class="chat-icon-box">
							<image src="https://res-jt-health-cn.oss-cn-shanghai.aliyuncs.com/machine/high.png"
								class="chat-icon" />
						</view>
					</view>
				</view>
				<view class="line-box"></view>
				<view class="report-title">脉象点评</view>
				<view class="report-info">
					{{ reportDetail.physique_explain?reportDetail.physique_explain:reportDetail.report_summary}}
				</view>
				<view class="line-box"></view>
				<view class="mai-list">
					<view class="mai-item item-one" style="margin-right: 4%;">
						<img src="https://res.jt-health.cn/images/xiaojie/zhonghefengxianzhishu_bg@2x.png" width="100%">
						<view class="item-one-desc">
							<h2>综合风险指数</h2><span>综合评估当下身体状态</span>
							<h1>{{reportDetail.health_risk_index.index_value}}</h1>
						</view>
					</view>
					<view class="mai-item item-one">
						<img src="https://res.jt-health.cn/images/xiaojie/shenti@2x.png" width="100%">
						<view class="item-one-desc">
							<h2>身体状态</h2><span>反应当下的健康年龄</span>
							<view class="mai-shenti">
								<img width="100%" :src="page_image_02">
							</view>
						</view>
					</view>
					<view class="mai-item item-one" style="margin-right: 4%;">
						<img src="https://res.jt-health.cn/images/xiaojie/xinlv_bg@2x.png" width="100%">
						<view class="item-one-desc">
							<h2>心率(次/分)</h2><span>心率监测</span>
							<h1>{{reportDetail.heart_rate}}</h1>
						</view>
					</view>
					<view class="mai-item item-one">
						<img src="https://res.jt-health.cn/images/xiaojie/xueyang_bg@2x.png" width="100%">
						<view class="item-one-desc">
							<h2>血氧饱和度(%)</h2><span>血氧监测</span>
							<h1>{{reportDetail.blood_oxygen}}</h1>
						</view>
					</view>
				</view>
				<view class="line-box"></view>
				<view class="report-title">局部脉搏波形图</view>
				<canvas canvas-id="pulseCanvas" type="2d" class="pulse-canvas"></canvas>
			</view>

		</view>
		<view id='anchor-1'>
			<view class="report-item" v-if="reportDetail">
				<view class="title-images-box">
					<image src="https://res.jt-health.cn/images/xiaojie/tizhibianzheng@2x.png" class="title-images1" />
				</view>
				<view class="phy-desc">体质辩证的结果是依据您7日内的健康检测数据评估而得出<br>您的数据反映如下体质：</view>
				<view class="mai-physical">
					<view class="tab-list">
						<view class="tab-item" :class="{active:physicalDialecticsIndex===index}"
							v-for="(item,index) in reportDetail.physical_dialectics_list" :key="index"
							@click="physicalDialecticsIndex=index;physicalDialecticsInfo=item">
							{{item.physical_dialectics_cate_content}}
						</view>
					</view>
					<view class="mai-phy" v-if="physicalDialecticsInfo&&physicalDialecticsInfo.describe">
						<view class="phy-img"><img :src="physicalDialecticsInfo.describe.physical_url" alt="">
						</view>
						<view class="phy-title">
							<view class="phy-title-left"><img src="https://res.jt-health.cn/images/xiaojie/left@2x.png"
									alt=""> 表现特征
							</view>
							<!--<view class="phy-title-right">查看详情 &gt;</view>-->
						</view>
					</view>
					<view class="phy-description"><span>【定义】</span>
						<p v-html="physicalDialecticsInfo.describe.physical_signs"></p>
						<!-- <span>【形体特征】</span>
						<p v-html="physicalDialecticsInfo.describe.body_cachet"></p> -->
						<span>【心理特征】</span>
						<p v-html="physicalDialecticsInfo.describe.mental_cachet"></p>
						<span>【常见表现】</span>
						<p v-html="physicalDialecticsInfo.describe.common_show"></p>
					</view>
					<view class="phy-title" style="margin-top: 20px;">
						<view class="phy-title-left"><img src="https://res.jt-health.cn/images/xiaojie/left@2x.png"
								alt=""> 调理方法
						</view>
						<!-- <view class="phy-title-right">查看详情 &gt;</view> -->
					</view>
					<view class="phy-description"><span>【运动调养】</span>
						<p v-html="physicalDialecticsInfo.describe.sports_recuperation"> </p>
						<span>【饮食调养】</span>
						<p v-html="physicalDialecticsInfo.describe.diet_recuperation"></p>
						<span>【药食调养】</span>
						<p v-html="physicalDialecticsInfo.describe.food_recuperation"> </p>
					</view>
					<view class="zhuyi">
						注：人的体质受年龄、环境、饮食、情绪、运动等诸多因素影响，多为兼夹体质（同时兼备两种或两种以上的体质特征），存在动态特征，需综合调理。</view>
				</view>
			</view>
		</view>
		<view id='anchor-2'>
			<view class="report-item" v-if="reportDetail">
				<view class="title-images-box">
					<image src="https://res.jt-health.cn/images/xiaojie/jingluofenxi@2x.png" class="title-images1" />
				</view>
				<view class="report-title1">经络循环状态</view>
				<view style="padding: 0px 6px;">
					<view class="feng-item">
						<view class="feng-item-one"> 虚弱经络<br>（循环不足） </view>
						<view class="feng-item-two"> 上火经络<br>（循环过高） </view>
					</view>
					<view class="luo-list">
						<view class="luo-list-left">
							<view class="luo-list-left-item" v-for="(item,index) in meridiansDown" :key="index">
								<span>{{item.name}}</span>
								<view><img :src="item.describe.meridian_url" alt="">
								</view>
							</view>
						</view>
						<view class="luo-list-right">
							<view class="luo-list-left-item" v-for="(item,index) in meridiansUp" :key="index">
								<span>{{item.name}}</span>
								<view><img :src="item.describe.meridian_url" alt="">
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="line-box"></view>
				<view class="report-title1">经络柱状图</view>
				<view
					style="display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; margin-bottom: 10px;">
					<view class="jingluo" v-for="(item,index) in reportDetail.meridians" :key="index">
						<view class="jl-items">
							<view class="jindua-r"
								:style="{background: 'rgb(254, 70, 49)', height:(((74/2)*(Math.abs(item.date)/100))+7)+'vw'  }"
								v-if="item.date<-40">
								<view class="jinduc-r">{{item.date}}</view>
							</view>
							<view class="jindua"
								:style="{background: 'rgb(255, 193, 48)', height:(((74/2)*(Math.abs(item.date)/100))+7)+'vw' }"
								v-else-if="(item.date>=-40)&&(item.date<-20)">
								<view class="jinduc">{{item.date}}</view>
							</view>
							<view class="jindu-c"
								:style="{background: 'rgb(83, 211, 163)', height:(((74/2)*(Math.abs(item.date)/100))+7)+'vw' }"
								v-else-if="(item.date>=-20)&&(item.date<=0)">
								<view class="jinduc">{{item.date}}</view>
							</view>
							<view class="jindu"
								:style="{background: 'rgb(83, 211, 163)', height:(((74/2)*(Math.abs(item.date)/100))+7)+'vw' }"
								v-else-if="(item.date>=0)&&(item.date<=20)">
								<view class="jindub">{{item.date}}</view>
							</view>
							<view class="jindu-h"
								:style="{background: 'rgb(255, 193, 48)', height:(((74/2)*(Math.abs(item.date)/100))+7)+'vw' }"
								v-else-if="(item.date>20)&&(item.date<=40)">
								<view class="jindub-h">{{item.date}}</view>
							</view>
							<view class="jindu-d"
								:style="{background: 'rgb(254, 70, 49)', height:(((74/2)*(Math.abs(item.date)/100))+7)+'vw' }"
								v-else="item.date>40">
								<view class="jindub">{{item.date}}</view>
							</view>
						</view>
						<view class="jl-name">{{item.name}}</view>
					</view>
				</view>
				<view class="tie-text">越接近"<text style="font-size: 4vw;font-style: normal;color: #009591;">0</text>"越健康
				</view>
				<view class="zhuyi">
					注：人体的气血时刻在变化，多次量测略有波动属于人体正常现象，肾经、膀胱经一般变化较大，脾经、肺经变化较小。在短时间内、并且心率波动不大的情况下，经络值偏差一般不超过正负10%。</view>
			</view>
		</view>

		<view id='anchor-3'>
			<view class="report-item" v-if="reportDetail">
				<view class="title-images-box" v-if="reportDetailRiskFive.length>0">
					<image src="https://res.jt-health.cn/images/xiaojie/fengxianyugu@2x.png" class="title-images1" />
					<view class="risk-title">重要风险提示</view>
				</view>
				<view class="risk-secti" v-if="reportDetailRiskFive.length>0">
					<view class="sk-margin" v-for="(item,index) in reportDetailRiskFive" :key="index">
						<view
							:class="item.degree==='高风险'?'sk-listw bg-heighta':item.degree==='中风险'?'sk-listw bg-centera':'sk-listw bg-lowa'">
							<view class="sk-left-img">
								<img :src="item.img">
							</view>
							<view class="sk-middle-s">
								<view class="risk-level-s">
									<p style="font-size: 14px; color: rgba(0, 0, 0, 0.87); font-weight: 600;">
										{{item.risk_name}}
									</p>
									<view class="g-get g-heighta" v-if="item.degree==='高风险'">
										<img src="https://res.jt-health.cn/images/high.gif"
											style="width: 16px; height: 16px;">
										<span>{{item.degree}}</span>
										{{item.index_value}}
									</view>
									<view class="g-get g-centera" v-if="item.degree==='中风险'">
										<img src="https://res.jt-health.cn/images/highgb.png"
											style="width: 16px; height: 16px;">
										<span>{{item.degree}}</span>
										{{item.index_value}}
									</view>
									<view class="g-get g-lowa" v-if="item.degree==='轻风险'">
										<img src="https://res.jt-health.cn/images/highgy.png"
											style="width: 16px; height: 16px;">
										<span>{{item.degree}}</span>
										{{item.index_value}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="line-box" v-if="reportDetailRiskFive.length>0"></view>
				<view class="report-title1">18项风险指数</view>
				<view class="chat-icon-box">
					<image src="https://res-jt-health-cn.oss-cn-shanghai.aliyuncs.com/machine/high.png"
						class="chat-icon" />
				</view>
				<view class="risk-list" v-for="(item,index) in reportDetailClassRisk" :key="index">
					<view class="item-title" style="margin-bottom: 10px;">{{item.name}}</view>
					<view class="item-box">
						<view class="risk-item" v-for="(risk,idx) in item.list" :key="idx">
							<view class="risk-left">
								<image :src="risk.img" style="width: 64px; height: 64px;"></image>
							</view>
							<view class="risk-right">
								<view class="risk-top">
									<view class="risk-name">
										<view>{{risk.risk_name}}</view>
										<!--                  <view class="risk-degree">( {{risk.degree}})</view>-->
									</view>
									<view class="risk-desc" @click="handleDescInfo(risk)">
										描述
										<u-icon name="arrow-right" size="14"></u-icon>
									</view>
								</view>
								<view class="risk-progress">
									<view class="left" style="width: 100%;"></view>
									<view class="right"
										:style="{left:(risk.index_value)+'%',width:(100-risk.index_value)+'%'}">
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bot-me" style="margin-top: 20px; margin-bottom: 20px;" v-if="reportDetail"> 所有数据仅供健康评估参考，不能作为医疗诊断和建议！ </view>
		</view>
		<view class="fill-box safe-bottom"></view>
		<u-popup :show="showDesc" :closeable="true" @close="showDesc= false">
			<view class="desc-popup" v-if="descInfo">
				<view class="desc-title">{{descInfo.risk_name}}</view>
				<view class="desc-item">
					<view class="item-title">风险描述</view>
					<view class="item-value">{{descInfo.describe.describe}}</view>
				</view>
				<view class="desc-item">
					<view class="item-title">评估依据</view>
					<view class="item-value">{{descInfo.describe.refer}}</view>
				</view>
				<view class="desc-item">
					<view class="item-title">可能原因</view>
					<view class="item-value">{{descInfo.describe.reason}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				navList: [{
						name: "综合评估",
						img: 'https://res.jt-health.cn/images/xiaojie/zonghefengxian@2x.png',
						img2: 'https://res.jt-health.cn/images/xiaojie/zonghefengxian2@2x.png',
					},
					{
						name: "体质辩证",
						img: 'https://res.jt-health.cn/images/xiaojie/tizhi@2x.png',
						img2: 'https://res.jt-health.cn/images/xiaojie/tizhi2@2x.png',
					},
					{
						name: "经络分析",
						img: 'https://res.jt-health.cn/images/xiaojie/jingluo@2x.png',
						img2: 'https://res.jt-health.cn/images/xiaojie/jingluo2@2x.png',
					},
					{
						name: "风险预估",
						img: 'https://res.jt-health.cn/images/xiaojie/fengxian@2x.png',
						img2: 'https://res.jt-health.cn/images/xiaojie/fengxian2@2x.png',
					},
				],
				activeIndex: 0, // 当前激活的锚点索引
				anchorPositions: [], // 存储每个锚点的顶部位置
				reportDetail: null,
				showDesc: false,
				descInfo: null,
				// 原始数据点
				pulseData: [],
				normalizedData: [],
				extendedData: [],
				reportDetailClassRisk: [], // 分类后的风险列表
				reportDetailRiskFive: [], // 风险值大于50的风险列表
				page_image_01: '',
				page_image_02: '',
				meridiansDown: [], // 虚弱经络
				meridiansUp: [], // 上火经络
				physicalDialecticsIndex: 0, //体质辩证索引
				physicalDialecticsInfo: {}, //体质辩证信息
			}
		},
		computed: mapGetters(['isLogin', 'userInfo']),
		onLoad(options) {
			if (options && options.reportId) {
				this.reportId = options.reportId
				this.getReportDetail()
			}
		},
		// 监听页面滚动
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
      for (let i = 0; i < this.anchorPositions.length; i++) {
        if (scrollTop >= this.anchorPositions[i] - 100 && (i === this.anchorPositions.length - 1 || scrollTop <
            this.anchorPositions[i + 1] - 100)) {
          this.activeIndex = i;
          break;
        }
      }
		},
		methods: {
			// 滚动到指定锚点
			scrollToAnchor(index) {
				this.activeIndex = index;
				let scrollTop = this.anchorPositions[index]
				uni.pageScrollTo({
					scrollTop: scrollTop,
					duration: 0,
				});
			},
			// 获取所有锚点的位置信息
			getAnchorPositions() {
				const query = uni.createSelectorQuery().in(this);
				this.navList.forEach((_, index) => {
					query.select(`#anchor-${index}`).boundingClientRect();
				});
				query.exec((res) => {
					this.anchorPositions = res.map(item => item.top - 90);
					console.log(this.anchorPositions, 888888);
				});
			},
			handleDescInfo(item) {
				this.showDesc = true
				this.descInfo = item
			},
			getReportDetail() {
				this.$Api.user.getReportDetail({
					id: this.reportId
				}).then(res => {
					this.reportDetail = JSON.parse(res.data.zhongyi_report)
					console.log(this.reportDetail, 99999);
					// 综合评估图片 this.reportDetail.health_risk_index.index_value/2 往上取整
					this.page_image_01 =
						`https://res.jt-health.cn/echarta/tou${Math.ceil(this.reportDetail.health_risk_index.index_value/2)}.png`
					// 身体状态图片 this.reportDetail.health_age - this.reportDetail.age 往上取整
					this.page_image_02 =
						`https://res.jt-health.cn/kage/age${Math.ceil(this.reportDetail.health_age-this.reportDetail.health_risk_index.index_value)}@2x.png`
					console.log(this.page_image_01)
					let priceName = {
						'压力': 'yali_icon',
						'疲劳': 'pilao_icon',
						'睡眠质量': 'shuimianzhiliang_icon',
						'血压风险': 'xueya_icon',
						'血脂风险': 'xuezhi_icon',
						'心血管风险': 'xinxueguan_icon',
						'脑血管风险': 'naoxuegaun_icon',
						'肝负担风险': 'ganfudan_icon',
						'肾负担风险': 'shenfudan_icon',
						'内分泌风险': 'neifenmi_icon',
						'缺钙风险': 'quegai_icon',
						'血糖风险': 'xuetang_icon',
						'免疫力': 'mianyili_icon',
						'过敏风险': 'guoming_iocn',
						'感染风险': 'ganran_icon',
						'消化力': 'xiaohuali_icon',
						'胃食道逆流风险': 'weishidao_icon',
						'胃酸过多风险': 'weisuanguoduo_icon'
					}
					// this.reportDetail.meridians过滤掉date为null的数据或者undefined的数据
					this.reportDetail.meridians = this.reportDetail.meridians.filter(item => item.date !== null &&
						item.date !== undefined);
					if (this.reportDetail.physical_dialectics_list && this.reportDetail.physical_dialectics_list
						.length > 0) {
						this.physicalDialecticsInfo = this.reportDetail.physical_dialectics_list[0];
						console.log(this.physicalDialecticsInfo);
					}
					// this.reportDetail.risk拼接图片
					this.reportDetail.risk.forEach(item => {
						item.img = `https://res.jt-health.cn/risk/${priceName[item.risk_name]}.png`
					})
					this.meridiansDown = this.reportDetail.meridians.filter(item => item.date < -20).sort((a, b) =>
						a.date - b.date);
					this.meridiansUp = this.reportDetail.meridians.filter(item => item.date > 20).sort((a, b) => a
						.date - b.date);

					//提取风险值前五名的数据
					this.reportDetailRiskFive = this.reportDetail.risk.sort((a, b) => b.index_value - a
							.index_value)
						.slice(0, 5);
					//风险分类
					this.reportDetailClassRisk = [{
						name: '神经系统',
						list: this.reportDetail.risk.filter(item => ['压力', '疲劳', '睡眠质量'].includes(item
							.risk_name))
					}, {
						name: '心血管系统',
						list: this.reportDetail.risk.filter(item => ['血压风险', '血脂风险', '心血管风险', '脑血管风险']
							.includes(item.risk_name))
					}, {
						name: '功能系统',
						list: this.reportDetail.risk.filter(item => ['肝负担风险', '肾负担风险', '内分泌风险', '缺钙风险']
							.includes(item.risk_name))
					}, {
						name: '代谢系统',
						list: this.reportDetail.risk.filter(item => ['血糖风险', '免疫力', '过敏风险', '感染风险']
							.includes(item.risk_name))
					}, {
						name: '消化系统',
						list: this.reportDetail.risk.filter(item => ['消化力', '胃食道逆流风险', '胃酸过多风险'].includes(
							item.risk_name))
					}]
					// 脉搏波形数据
					this.pulseData = this.reportDetail.wave_data
					this.normalizeData();
					this.$nextTick(()=>{
						this.getAnchorPositions();
					})
					setTimeout(() => {
						this.drawPulseWave();
					}, 1000)
				})
			},
			// 数据归一化处理（将大数值转换为适合绘制的范围）
			normalizeData() {
				// 找出最大值和最小值
				const max = Math.max(...this.pulseData);
				const min = Math.min(...this.pulseData);

				// 归一化到0-100的范围（可以根据需要调整）
				this.normalizedData = this.pulseData.map(value => {
					return 100 - ((value - min) / (max - min)) * 100;
				});
				this.prepareData()
			},
			prepareData() {
				const original = [...this.normalizedData]; // 原始6个点
				this.extendedData = [];

				// 改进的插值方案：三次样条插值或多项式插值
				// 这里演示简化的三次样条插值概念
				for (let i = 0; i < original.length - 1; i++) {
					const p0 = original[i];
					const p1 = original[i + 1];

					// 在两点间插入3个过渡点（可根据需要调整密度）
					for (let j = 0; j <= 3; j++) {
						const t = j / 3;
						// 使用三次插值公式（简化版）
						const interpolated = p0 + (p1 - p0) * (3 * t * t - 2 * t * t * t); // 光滑过渡
						this.extendedData.push(interpolated);
					}
				}
				// 添加最后一个点
				this.extendedData.push(original[original.length - 1]);
			},
			// 绘制脉搏波形
			drawPulseWave() {
				const ctx = uni.createCanvasContext('pulseCanvas');
				const canvasWidth = 300; // 画布宽度
				const canvasHeight = 200; // 画布高度
				const paddingX = 20; // 内边距
				const paddingY = 60; // 内边距
				// 设置背景
				ctx.setFillStyle('#ffffff');
				ctx.fillRect(0, 0, canvasWidth, canvasHeight);

				// 计算每个数据点的x坐标间隔
				const dataLength = this.extendedData.length;
				const xInterval = (canvasWidth - 2 * paddingX) / (dataLength - 1);

				// 绘制波形
				ctx.setStrokeStyle('#009591');
				ctx.setLineWidth(2);
				ctx.beginPath();

				this.extendedData.forEach((value, index) => {
					const x = paddingX + index * xInterval;
					const y = paddingY + value * (canvasHeight - 2 * paddingY) / 100;

					if (index === 0) {
						ctx.moveTo(x, y);
					} else {
						ctx.lineTo(x, y);
					}
				});

				ctx.stroke();

				// 绘制图例和标签
				ctx.setFontSize(10);
				ctx.setFillStyle('#333333');


				// 绘制完成
				ctx.draw();
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		box-sizing: border-box;
		position: sticky;
		top: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 10px 20px;
		margin-bottom: 10px;

		.nav-item {
			width: 22%;
			padding: 10px 0;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 1px solid #e5e5ef;
			font-size: 12px;

			image {
				margin-bottom: 6px;
			}

			&.active {
				color: #fff;
				background: #009591;
				border: 1px solid #009591;
			}
		}
	}



	.line-box {
		width: 94%;
		margin: 15px auto;
		border-top: 1px solid rgb(223, 230, 233);
	}

	.bot-me {
		text-align: center;
		font-size: 12px;
		color: #999999;
	}

	.desc-popup {
		padding: 20px;
		max-height: 60vh;
		overflow-y: auto;

		.desc-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		.desc-item {
			margin-bottom: 15px;

			.item-title {
				font-size: 14px;
				color: #333333;
				margin-bottom: 5px;
				font-weight: bold;
			}

			.item-value {
				font-size: 13px;
				color: #666666;
				line-height: 1.5;
			}
		}
	}

	.title-images-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;

		.title-images {
			width: 80%;
			height: 27px;
		}

		.title-images1 {
			width: 80%;
			height: 18px;
		}

		.risk-title {
			margin: 8px 0;
			font-size: 4.26667vw;
			font-family: PingFang SC;
			font-weight: 700;
			color: #424242;

		}
	}

	.chat-icon-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;

		.chat-icon {
			width: 142px;
			height: 20px;
		}

	}

	.phy-desc {
		font-size: 12px;
		color: #666666;
		line-height: 1.5;
		text-align: center;
		margin-top: 10px;
	}

	.tcmReport-page {
		background-color: #ffffff;
		min-height: 100vh;
		width: 100%;
		position: relative;

		.mai-phy {
			text-align: left;

			.phy-img {
				width: 60%;
				margin-left: 20%;

				img {
					width: 100%
				}
			}
		}

		.tab-list {
			display: flex;
			justify-content: flex-start;
			background: #fff;
			padding: 10px 0;

			.tab-item {
				width: 30%;
				flex: none;
				margin-right: 5%;
				background: #dfe6e9;
				border-radius: 4.8vw 4.8vw 4.8vw 4.8vw;
				font-weight: 500;
				color: #009591;
				height: 9.6vw;
				line-height: 9.6vw;
				font-size: 4vw;
				text-align: center;

				&.active {
					background: #009591 !important;
					color: #fff;
				}
			}
		}

		.phy-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0;
			font-size: 14px;
			font-weight: 600;

			.phy-title-left {
				display: flex;
				align-items: center;

				img {
					width: 20px;
					height: 20px;
					margin-right: 6px;
				}
			}

			.phy-title-right {
				font-size: 12px;
				color: #009591;
			}
		}

		.phy-description {
			text-align: left;
			box-shadow: 0 .8vw 1.6vw 1px rgba(0, 0, 0, .11);
			border-radius: 3.2vw 3.2vw 3.2vw 3.2vw;
			padding: 4vw;
			text-align: left;

			span {
				font-size: 14px;
				font-weight: 600;
				color: #333333;
			}

			p {
				margin: 6px 0 10px 0;
				font-size: 12px;
				color: #666666;
				line-height: 1.5;
			}
		}

		.zhuyi {
			text-align: left;
			color: rgba(0, 0, 0, .4);
			padding-top: 5.33333vw;
		}

		.profile-section {
			border-radius: 8px;
			margin: 20px;
			background-color: rgb(0, 149, 145);
			display: flex;
			padding: 15px 0;
			align-items: center;

			.avatar-block {
				padding: 0 15px;

				.avatar {
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}
			}

			.right-block {
				flex: 1;
				color: #fff;

				.name {
					font-size: 16px;
					margin-bottom: 5px;
				}

				.date {
					font-size: 12px;
				}
			}

		}

		.report-item {
			background-color: #FFFFFF;
			padding: 20px 10px;
			margin: 0 20px 10px;
			margin-bottom: 10px;
			box-shadow: 0 .53333vw 2.66667vw .53333vw rgba(223, 223, 223, 0.5);
			border-radius: 1.33333vw;

			.feng-item {
				display: flex;
				height: 16vw;
				font-size: 3.73333vw;
				font-family: PingFang SC;
				font-weight: 800;
				color: #fff;

				.feng-item-one {
					width: 50%;
					text-align: center;
					font-size: 3.73333vw;
					background: #009591;
					border-radius: 3.46667vw 0 0 0;
					padding-top: 2.66667vw
				}

				.feng-item-two {
					width: 50%;
					text-align: center;
					font-size: 3.73333vw;
					padding-top: 2.66667vw;
					background: #f5a200;
					border-radius: 0 3.46667vw 0 0
				}
			}

			.luo-list {
				display: flex;

				.luo-list-left {
					width: 50%;
					text-align: center;

					.luo-list-left-item {
						background: rgba(0, 149, 145, .15);
						border-right: 1px solid #fff;
						border-bottom: 1px solid #fff;
						cursor: pointer;

						img {
							width: 23.46667vw;
							height: 32vw;
							text-align: center;
						}

						span {
							font-size: 3.73333vw;
							font-family: PingFang SC;
							font-weight: 500;
							color: #009591;
							line-height: 10.66667vw
						}
					}
				}

				.luo-list-right {
					width: 50%;
					text-align: center;

					.luo-list-left-item {
						background: rgba(245, 162, 0, .15);
						border-bottom: 1px solid #fff;
						cursor: pointer;

						img {
							width: 23.46667vw;
							height: 32vw;
							text-align: center;
						}

						span {
							font-size: 3.73333vw;
							font-family: PingFang SC;
							font-weight: 500;
							color: #e88b00;
							line-height: 10.66667vw;
						}
					}
				}
			}

			.risk-secti {
				margin-bottom: 10px;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;

				.sk-margin {
					margin-bottom: 10px;
					width: 48%;

					.sk-listw {
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						border-radius: 12px;
						padding-bottom: 10px;

						.sk-left-img {
							width: 22vw;
							height: 22vw;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.sk-middle-s {
							flex: 1;

							.risk-level-s {
								display: flex;
								justify-content: center;
								flex-direction: column;
								align-items: center;
								margin-top: 6px;

								.g-get {
									display: flex;
									align-items: center;
									font-size: 14px;
									color: #ff4d4f;

									span {
										margin: 5px;
									}
								}

								.g-heighta {
									color: red
								}

								.g-lowa {
									color: #d5d540;
								}

								.g-centera {
									color: #faad14;
								}
							}
						}
					}
				}

				.bg-heighta {
					background: rgba(255, 0, 0, .15)
				}

				.bg-centera {
					background: rgba(254, 140, 53, .15)
				}

				.bg-lowa {
					background: rgba(213, 213, 64, .15)
				}
			}

			.evaluation-box {


				.chart-box {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;

					.chat-image {
						width: 146px;
						height: 112px;
					}


				}
			}

			.pulse-canvas {
				margin: 0 auto;
				height: 200px;
			}

			.report-title {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
			}

			.report-title1 {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
				text-align: center;
			}

			.report-info {
				font-size: 14px;
				color: #333333;
				line-height: 1.5;
				margin-bottom: 20px;
			}

			.mai-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 20px;

				.mai-item {
					width: 48%;
					background-color: #f9f9f9;
					border-radius: 8px;
					overflow: hidden;
					position: relative;
					margin-bottom: 10px;

					img {
						width: 100%;
						height: auto;
						display: block;
					}

					.item-one-desc {
						position: absolute;
						top: 10%;
						left: 10%;
						color: #333;
						font-size: 14px;

						h2 {
							font-size: 16px;
							margin-bottom: 5px;
						}

						span {
							font-size: 12px;
							color: #666;
							margin-bottom: 10px;
							display: block;
						}

						h1 {
							font-size: 24px;
							margin-top: 5px;
						}

						.mai-shenti {
							width: 90%;
							height: 48px;
							margin-top: 5px;

							img {
								width: 100%;
								height: auto;
								display: block;
							}
						}
					}
				}
			}

			.tie-text {
				font-size: 3.2vw;
				color: #999;
				margin-bottom: 2.66667vw;
			}

			.zhuyi {
				font-size: 3.2vw;
				color: #999;
				line-height: 1.5;
			}

			.jingluo {
				flex: 1;

				.jl-list {
					margin-bottom: 2.66667vw;
				}

				.jl-name {
					text-align: center;
					font-size: 3.46667vw;
					color: #333;
				}

				.jl-items {
					width: 6.93333vw;
					height: 74.66667vw;
					background: #ebecf1;
					border-radius: 3.46667vw;
					position: relative;
					margin-bottom: 1.33333vw;
					font-size: 3.46667vw;
					font-weight: 700 !important;

					.jindu {
						width: 6.93333vw;
						border-radius: 3.46667vw;
						position: absolute;
						bottom: 45%;

						.jindub {
							width: 6.93333vw;
							height: 6.93333vw;
							text-align: center;
							line-height: 6.93333vw;
							background: url(https://res.jt-health.cn/risk/greenb.png) no-repeat;
							background-size: 6.93333vw 6.93333vw;
							color: #fff;
							position: absolute;
							bottom: 0;
						}
					}

					.jindu-h {
						width: 6.93333vw;
						border-radius: 3.46667vw;
						position: absolute;
						bottom: 45%;

						.jindub-h {
							width: 6.93333vw;
							height: 6.93333vw;
							text-align: center;
							line-height: 6.93333vw;
							background: url(https://res.jt-health.cn/risk/yellowb.png) no-repeat;
							background-size: 6.93333vw 6.93333vw;
							color: #fff;
							position: absolute;
							bottom: 0;
						}
					}

					.jindu-d {
						width: 6.93333vw;
						border-radius: 3.46667vw;
						position: absolute;
						bottom: 45%;

						.jindub {
							width: 6.93333vw;
							height: 6.93333vw;
							text-align: center;
							line-height: 6.93333vw;
							background: url(https://res.jt-health.cn/risk/redb.png) no-repeat;
							background-size: 6.93333vw 6.93333vw;
							color: #fff;
							position: absolute;
							bottom: 0;
						}
					}

					.jindu-c {
						width: 6.93333vw;
						border-radius: 3.46667vw;
						position: absolute;
						top: 45%;

						.jinduc {
							width: 6.93333vw;
							height: 6.93333vw;
							text-align: center;
							line-height: 7.46667vw;
							background: url(https://res.jt-health.cn/risk/greenb.png) no-repeat;
							background-size: 6.93333vw 6.93333vw;
							color: #fff;
							position: absolute;
							top: 0;
						}
					}

					.jindua {
						width: 6.93333vw;
						height: 18.66667vw;
						border-radius: 3.46667vw;
						position: absolute;
						top: 45%;

						.jinduc {
							width: 6.93333vw;
							height: 6.93333vw;
							text-align: center;
							line-height: 7.46667vw;
							background: url(https://res.jt-health.cn/risk/yellowb.png) no-repeat;
							background-size: 6.93333vw 6.93333vw;
							color: #fff;
							position: absolute;
							top: 0;
						}
					}

					.jindua-r {
						width: 6.93333vw;
						height: 18.66667vw;
						border-radius: 3.46667vw;
						position: absolute;
						top: 45%;

						.jinduc-r {
							width: 6.93333vw;
							height: 6.93333vw;
							text-align: center;
							line-height: 7.46667vw;
							background: url(https://res.jt-health.cn/risk/redb.png) no-repeat;
							background-size: 6.93333vw 6.93333vw;
							color: #fff;
							position: absolute;
							top: 0;
						}
					}
				}
			}

			.risk-list {
				.item-title {
					font-size: 14px;
					font-weight: bold;
					color: #333333;
					margin-bottom: 10px;
					margin-top: 10px;
				}

				.item-box {
					border-radius: 8px;
					padding: 15px;
					box-sizing: border-box;
					box-shadow: 0 .8vw 1.6vw 1px rgba(0, 0, 0, .11);
				}

				.risk-item {
					display: flex;
					align-items: center;
					margin-bottom: 15px;

					.risk-right {
						flex: 1;
						margin-left: 10px;
					}

					.risk-top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;
					}

					.risk-name {
						font-size: 14px;
						color: #333333;
						margin-bottom: 5px;
						display: flex;
						align-items: center;
						font-weight: bold;

						.risk-degree {
							color: #999999;
							font-size: 12px;
							margin-left: 5px;
						}
					}

					.risk-desc {
						font-size: 12px;
						color: #666666;
						display: flex;
						align-items: center;

						u-icon {
							margin-left: 3px;
						}
					}

					.risk-progress {
						position: relative;
						height: 12px;
						background-color: #E0E0E0;
						border-radius: 5px;
						overflow: hidden;

						.left {
							position: absolute;
							top: 0;
							left: 0;
							height: 100%;
							background: linear-gradient(90deg, #1bc28d, #f7e613 40%, #f5a623 59%, #ff4b5d);
						}

						.right {
							position: absolute;
							top: 0;
							height: 100%;
							background: linear-gradient(90deg, #e5e5e5 0, #e5e5e5 100%);
						}
					}
				}
			}
		}
	}
</style>
